CSS Flexbox 網頁切版技巧

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。 区域内的部分显示，区域外的隐藏。

範圍可以是裁切圖形的範圍，也可以向外延伸。 使用的是 HTML 元素時， geometry-box 可以設定 margin-box, border-box, padding-box, content-box 並配合 margin 、padding向外放大遮住可見的範圍。 使用 SVG 元素時，值可以使用 fill-box, stroke-box, view-box。 在「orandigo.github.io」查看更多資訊 inset 向內裁切 inset 內的值可設定 ( 上下 左右 ) 、( 上 右

clip-path 是個特別的 CSS 樣式屬性，可以在網頁元素裡定義一出個「裁切形狀」，讓元素只顯示裁切形狀的內容，裁切形狀外圍都會變成透明背景，這篇教學會介紹如何使用 clip-path 裁切路徑，繪製各種正多邊形以及不規則的圖形，最後還會介紹使用 url () 搭配 SVG ...

在 CSS 中使用裁剪可以帮助我们摆脱设计中看起来像箱子的所有内容。 通过使用各种基本形状（即 SVG），您可以创建裁剪路径。 然后剪掉您不想显示的元素部分。

clip-path属性允许你将元素裁剪为基本形状（圆形，椭圆形，多边形或嵌入）或 SVG ，从而在 CSS 中制作复杂形状。 两个或更多个具有相同点数的剪辑路径形状可以使用CSS的动画（Animations）和过渡（transitions）。 Browser Support caniuse.com.

在 網頁設計 上，有時我們只要擷取圖片的一部分時，若是還要另外切圖片的話又會顯得累贅，這時我們可以用CSS的屬性來自由裁切圖片囉！

裁剪最早是在CSS 2.1时代由clip属性引入，但该属性只能应用于绝对定位的元素，并且只能裁剪成矩形。 CSS3提供了强大的clip-path属性，突破了clip属性的众多限制，接下来将围绕clip-path属性展开讲解。